<extend name="Public/layout"/>

<block name="body">
  
  <style type="text/css">
.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}
.page01  .num{
	padding:6px 12px;
	border:1px solid #ddd;
	color:#337ab7;
	margin-left:-1px;
}
.page01 .current{
	padding:6px 12px;
	background:#337ab7;
	color:#fff;
}
.page01 .next,.prev{
	padding:6px 12px;
	border:1px solid #ddd;
	color:#337ab7;
	margin-left:-1px;
}
</style>

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>

    function getchild(id){      
    	 ajaxGetChild(id, $("#"+id));    	 
    }
      
    function ajaxGetChild(id, obj){    	
    	var children = obj.parent('li.parent_li').find('ul');    	
      	 if (children.is(":visible")) {    	       
	            children.remove();
	            return false;
	      }      	 
    	$.ajax({
            type: "GET",
            url: "/index.php?s=/Member/ajax_get_child",
           data: {id : id},
            success: function(data){
            	var child_list = jQuery.parseJSON(data);
            	var obj = eval(child_list);
                $(obj).each(function(index) {    	                	
                  var val = obj[index];
                   var cid = val.id;
                   var nickname = val.nickname;
                   $("#"+id).next().after("<ul><li  class='parent_li'><span id ="+cid+" onclick='getchild("+cid+")'><i class='icon-folder-open'  style='display: list-item;'></i>"+nickname+"</span> <a href='#'>"+nickname+"</a></li></ul>") ;                     
                });
               }
        });    	    	
    }    
</script>
</head>
<body>

<div class="tree well">
     <ul>
        <volist name="parent" id="list">
        <li  class="parent_li">
            <span id ="{$list.id}" title="Collapse this branch"><i class="icon-folder-open" ></i> {$list.nickname}</span> <a href="">{$list.nickname}</a>            
        </li>
        </volist>        
    </ul>
    <div class="page01">{$show}</div>
</div>


<script type="text/javascript">
$(function () {   	
    $('.tree li.parent_li > span').on('click', function (e) {    	    
        ajaxGetChild($(this).attr('id'), $(this));
    });    
}); 
</script>
</block>
